<template>
  <div class="formula-form">
    <div class="setting-title">公式</div>
    <div class="setting-content">
      <!-- 样式配置 -->
      <property-form
        :form-data="formData"
        :panel-list="panelList"
        @change="onPropertyChange"
      />
      <div class="divider"></div>
      <div class="setting-item">
        <div
          class="node-style-layout-header"
          @click="formulaFoldClose = !formulaFoldClose"
        >
          <div class="formula-tips">
            <span class="formula-text">公式</span>
            <a-tooltip
              placement="top"
              :overlay-style="{ userSelect: 'text' }"
              :mouse-leave-delay="0.5"
            >
              <template slot="title">
                <span
                  >键入$选择需要处理的数据列, 键入&可查看平台所支持的函数, 如:
                  计算第一列综合, 输入: sum($c1)</span
                ><br />
                <a
                  href="/docs/#/formula_guide?id=公式功能函数使用指南"
                  target="_blank"
                  style="color: #989fff; cursor: pointer; pointer-events: all;"
                  >详见函数说明文档</a
                >
              </template>
              <span @mouseover="annotationHover()" @mouseout="annotationOut()">
                <a-icon-font
                  v-show="isAnnotationHover"
                  type="iconinfo-cirlce-obeifen"
                />
                <a-icon-font
                  v-show="!isAnnotationHover"
                  type="iconinfo-cirlce-o"
                />
              </span>
            </a-tooltip>
          </div>
          <span class="arrow-icon">
            <a-icon :type="formulaFoldClose ? 'right' : 'down'" />
          </span>
        </div>
        <div
          class="node-style-content"
          style="padding: 0;"
          :class="{ 'close-fold': formulaFoldClose }"
        >
          <!-- 新增的公式列表 -->
          <formula-list
            v-for="item in formulaList"
            ref="group"
            :key="item.id"
            :item="item"
          >
          </formula-list>
        </div>
      </div>
    </div>
    <!--添加过滤按钮-->
    <div class="add-filter" @click="showFormulaModal()">
      <a-icon-font type="iconjiahao1" class="add-filter-icon" />
      <div class="add-filter-text">新增公式</div>
    </div>

    <!-- 编辑/新增公式modal -->
    <edit-formula-modal
      :title="Object.keys(editFormulaItem).length > 0 ? '编辑公式' : '新增公式'"
      :item="editFormulaItem"
      :data-list="dataset[0]"
      :visible="formulaModalShow"
      @close="handleClose"
    ></edit-formula-modal>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component, Watch } from 'vue-property-decorator'
import VisualizationStore from '@/store/modules/visualization'
import PropertyForm from '@/components/common/VisualizationDashboard/PropertyForm.vue'
import FormulaList from '@/components/visualization/formulaList.vue'
import EditFormulaModal from '@/components/visualization/EditFormulaModal.vue'

import {
  GridItemDataInterface,
  textPropertyPanelList,
} from '@/components/vueGridLayout/interfate/grid-Item-data-inteface'

@Component({
  components: {
    PropertyForm,
    FormulaList,
    EditFormulaModal,
  },
})
export default class FormulaForm extends Vue {
  @Prop({
    type: Array,
    required: true,
    default() {
      return []
    },
  })
  dataset!: Array<any>
  //  text chartOptions
  private formData: any = {}
  public formulaModalShow: boolean = false
  public editFormulaItem: any = {}
  private panelList = textPropertyPanelList
  //  icon hover status
  private isAnnotationHover = false

  public annotationHover() {
    this.isAnnotationHover = true
  }
  public annotationOut() {
    this.isAnnotationHover = false
  }

  private onPropertyChange(config: any) {
    this.formData = {
      ...this.formData,
      ...config,
    }
    const index = VisualizationStore.gridList.findIndex(
      (item) => VisualizationStore.currentGridItem?.i === item.i
    )
    const newChartOptions: any = this.formData
    //  更新widget 配置
    VisualizationStore.updateWidget({
      gridItem: {
        ...VisualizationStore.currentGridItem,
        chartOptions: newChartOptions,
      },
      index,
    })
  }

  // 弹出加载数据框
  public async showFormulaModal() {
    this.formulaModalShow = true
    this.editFormulaItem = {}
  }
  /**
   * 关闭加载数据弹框
   * @param flag
   */
  public handleClose(flag: boolean) {
    this.formulaModalShow = flag
  }

  private formulaFoldClose: boolean = false

  public get formulaList() {
    return VisualizationStore.getFormulaList
  }

  public get editFormula() {
    return VisualizationStore.getEditFormula
  }

  @Watch('editFormula', { deep: true })
  getEditFormula(newValue: any) {
    if (newValue) {
      this.showFormulaModal()
      this.editFormulaItem = newValue
    }
  }

  public get currentGridItem() {
    return VisualizationStore.currentGridItem
  }

  @Watch('currentGridItem', { immediate: true, deep: true })
  getCurrentGridItemId(
    newValue: GridItemDataInterface,
    oldValue: GridItemDataInterface
  ): void {
    if (
      (newValue && !oldValue) ||
      (newValue &&
        oldValue &&
        (newValue.i !== oldValue.i ||
          newValue.chartType[1] !== oldValue.chartType[1]))
    ) {
      this.formData = {}
      setTimeout(() => {
        this.initSetting()
      }, 10)
    } else if (newValue && oldValue) {
      this.initFormData()
    }
  }
  /**
   * 初始化配置
   */
  initSetting() {
    if (this.currentGridItem) {
      this.initFormData()
    }
  }
  /**
   * 初始化formData
   */
  initFormData() {
    if (
      VisualizationStore.currentGridItem &&
      VisualizationStore.currentGridItem.chartOptions
    ) {
      this.formData = {
        ...this.currentGridItem?.chartOptions,
      }
    }
  }
}
</script>

<style lang="less" scoped>
.formula-form {
  .setting-title {
    border-bottom: 1px solid #ddd;
    color: #5d637e;
    font-size: 14px;
    font-weight: bold;
    height: 46px !important;
    line-height: 46px;
    position: relative;
    text-align: center;

    &::after {
      background: #06f;
      content: ' ';
      height: 2px;
      width: 58px;
    }
  }

  .setting-content {
    box-sizing: border-box;
    height: auto;
    max-height: 75vh;
    overflow-y: scroll;
    padding: 0 24px;
    padding-top: 0;
    position: relative;
    width: 100%;

    .formula-text {
      font-weight: bolder;
      margin-right: 5px;
    }

    .divider {
      border-top: 1px solid #e9e9e9;
      height: 1px;
      left: 0;
      margin: 0;
      position: absolute;
      width: 100%;
    }

    .arrow-icon {
      /deep/ .anticon {
        font-size: 8px;
        position: absolute;
        right: 34px;
      }
    }

    /deep/ .panel-title {
      margin-top: 0;
    }

    /deep/ .panel-title-hr {
      display: none;
    }
  }

  .setting-item {
    display: block;
    flex-flow: column wrap;
    justify-content: flex-start;
  }

  // header
  .node-style-layout-header {
    align-items: center;
    background-color: #f9f9fc;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    height: 38px;
    justify-content: space-between;
    user-select: none;

    > span {
      color: #5d637e;
      font-weight: 600;
      letter-spacing: 1px;
    }
  }

  // 节点样式 模块
  .node-style-content {
    height: auto;
    padding: 0 24px;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(144, 147, 153, 0.5);
      border-radius: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 5px;
    }
  }

  .close-fold {
    display: none;
  }

  .add-filter {
    align-items: center;
    color: #6a74ff;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    height: 32px;
    justify-content: center;
    letter-spacing: 1px;
    width: 100%;

    .add-filter-icon {
      font-size: 16px;
    }

    .add-filter-text {
      margin-left: 10px;
      user-select: none;
    }
  }
}
</style>
